<template>
<div>
 <div class="search">
  <input class="search-input" v-model="keyword" type="text" placeholder="输入城市或拼音">
 </div>
  <div class="search-content" ref="search" v-show="keyword">
    <ul>
      <li v-for="item of list" :key="item.id"  @click="handleClick(item.name)" class="search-item border-bottom">
        {{item.name}}
      </li>
      <li class="search-item border-bottom" v-show="hasNoData">
        没有找到匹配数据
      </li>
    </ul>
  </div>
</div>

</template>

<script>
import Bscroll from "better-scroll"
import{mapMutations} from "vuex"
export default {
 name:"citySearch",
 props:{
   cities:Object
 },
 data(){
   return{
     keyword:"",
     list:[],
     timer:null
   }
 },
 methods:{
   handleClick(city){
     this.$store.commit("changeCity",city);
     this.changeCity(city)
      this.$router.push("/");
   },
   ...mapMutations(["changeCity"])
 },
 computed:{
    hasNoData(){
      return !this.list.length
    }
 },
 watch:{
   keyword(){ 
     if(this.timer){
       clearTimeout(this.timer);
     }
     if(!this.keyword){
       this.list=[]
       return
     }
     this.timer=setTimeout(()=>{
       const result=[]
       for(let i in this.cities){
          this.cities[i].forEach((value)=>{
            if(value.spell.indexOf(this.keyword)>-1||
            value.name.indexOf(this.keyword)>-1){
                result.push(value);
            }
          })
       }
       this.list=result
     },100);
   }
 },
 mounted(){
   this.scroll=new Bscroll(this.$refs.search);
 }
}
</script>
<style lang="stylus" scoped>
 @import "~styles/varibles.styl"
 .search
  height 0.72rem
  padding: 0 0.1rem 0.1rem 0.1rem;
  background:$bgColor
  .search-input
    width:100%
    height 0.62rem
    line-height:.62rem
    text-align:center
    border-radius:0.06rem
    color:#999
 .search-content
   z-index:1
   overflow:hidden 
   position:absolute  
   top:1.58rem 
   left:0
   right:0 
   bottom:0
  .search-item
    line-height:.62rem
    padding-left:.2rem
    color:#666
    background:#fff
</style>